<script>
import {computed, defineComponent, onMounted, reactive, ref, watch,inject} from "vue";
export default defineComponent({
    name : 'wordStudy2',
    props:  ['message'],
    setup(props){
        const message = props.message;
        const sentence = ref({});
        const options = ref([]);
        const meanings = ref([]);
        const icon_right = inject('icons_right');
        onMounted(()=>{
            sentence.value = message.sentence;
            options.value = message['options'];
            meanings.value = message['meanings'];
            options.value.push(message.word);
            options.value.sort(() => Math.random() - 0.5);
        })
        function handleOptions(index){
            //根据选择是否正确来决定是否展示详情页
            const targetIndex = options.value.findIndex((element)=>element === message.word);
            [0,1,2,3].forEach(item => {
              document.getElementById(`button-${item}`).setAttribute('disabled','disabled')
            })
            if(index === targetIndex){
                document.getElementById(`button-${index}`).classList.add('green-bgcolor','button-disabled')
                // for (let i=0;i<icon_right.value.length;i++){
                //   if (!icon_right.value[i]){
                //     icon_right.value[i] = true;
                //     break;
                //   }
                // }
                this.$emit('option-accept',1);
                // console.log(icon_right.value)
                // console.log(icon_right)

            }else{
                document.getElementById(`button-${index}`).classList.add('red-bgcolor','button-disabled')
                document.getElementById(`button-${targetIndex}`).classList.add('green-bgcolor','button-disabled')
                // false表示只传递用户点击错误选项信息，不进行数据更新
                // for (let i=0;i<icon_right.value.length;i++){
                //     if (icon_right.value[i]){
                //       icon_right.value[i] = false;
                //     }
                // }
                this.$emit('option-error')
                //错误才跳转
                this.$emit('optionclick');
            }
        }
        return{
            sentence,
            options,
            meanings,
            handleOptions,
            icon_right
        }
    }
})
    
</script>
<template>
    <div id="appCapsule">
      <div class="card no_bgcolor">
          <div v-for="meaning in meanings" class="card-header justify-content-start meaning-area">
            <span class="fw-bold" style="margin-right: 2rem;">{{ meaning["part_of_speech"] }}</span>
            <span>{{ meaning["definition"] }}</span>
          </div>
        
        <div class="diy-sentence">{{ sentence }}</div>
          
          <div class="appBottomMenu no_bgcolor flex-column">
            <button
              v-for="(option, index) in options"
              :key="index"
              :id="'button-' + index"
              type="button"
              class="btn diy-button item"
              @click="handleOptions(index)"
            >
              <span class="button_word">{{ option }}</span>
            </button>
          </div>
      </div>
    </div>
</template>
<style lang="scss" scoped>
.appBottomMenu{
  border-top: none;
}

body:not(.dark-mode) {
  .appBottomMenu span{
    color: black;
    font-size: 18px;
  }
}


body.dark-mode {
  .appBottomMenu span {
    color: #fff;
    font-size: 18px;
  }
  .diy-sentence {
    color: #fff;
  }
  .meaning-area {
    color:#A1A5AE;
  }
}
.no_bgcolor{
  background: none;
}
#appCapsule{
  height: 100vh;
  padding-bottom: 0;
}
.card{
  height: 100%;
  .card-header{
    font-size: 22px;
  }
}

.diy-sentence{
  display: flex;
  justify-content: left;
  margin: 4rem 1rem 0;
  padding:0 0.5rem;
  line-height: 2rem;
  font-size: 24px;
  color:#1d2024;
}

//这里两个important是为了防止被bootstrap自带样式覆盖
.green-bgcolor{
  background-color: #1DCC70 !important;
  border-width: 2px;
}
.red-bgcolor{
  background-color: #F6672E !important;
  border-width: 2px;
}

.diy-button{
  width: 90%;
  display: flex;
  height: 4.5rem;
  margin: 0 auto 1rem;
  border-width: 1px;
  border-color: rgba(192, 192, 192, 0.6);
  background-color: rgba(255, 255, 255, .1);
  box-shadow: 0 2px 4px rgba(128, 128, 128, .8) !important;
}

.button_word{
  font-size: large;
  font-weight: 700;
  letter-spacing: 1px;
}
.button-disabled{
  opacity: 0.9;
}
</style>